<template>
    <div class='router-div'>
      <div class="query-header">
        <div class="query-bar clearfix">
          <el-select v-model="searchKey" placeholder="请选择查询字段">
            <el-option label="不过滤" value="">

            </el-option>
            <el-option
              v-for="item in configTable.props"
              :key="item.prop"
              :label="item.name"
              :value="item.prop">
            </el-option>
          </el-select>
          <el-input v-model="searchValue" placeholder="请输入查询内容"></el-input>
          <el-button type="primary" @click="queryData">查询</el-button>

          <el-button type="warn" @click="itemAdd">新增</el-button>
        </div>

      </div>

      <div class="body">
        <el-dialog title="新增" :visible.sync="dialogNewVisible"
                   @close="dialogClose">
          <add-item :configTable="configTable"  v-on:dialogClose="dialogClose" v-on:selectProp="selectProp"></add-item>
        </el-dialog>
        <el-dialog :title="editDialogTitle" :visible.sync="dialogEditVisible" @close="dialogClose">
          <edit-item :configTable="configTable" :item="currEditItem" :copy="isCopyMode"   v-on:dialogClose="dialogClose" v-on:selectProp="selectProp"></edit-item>
        </el-dialog>
        <el-dialog title="选择条目" :visible.sync="dialogSelectVisible">
          <select-prop :conProp="currSelectConProp"  v-on:onSelectedProp="onSelectedProp" v-on:dialogClose="dialogSelectVisible = false"></select-prop>
        </el-dialog>
        <el-dialog
          title="提示"
          :visible.sync="dialogDeleteVisible"
          width="30%">
          <span>确认删除?</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogDeleteVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDelete">确 定</el-button>
          </span>
        </el-dialog>
        <table class="gridtable">
          <thead>
          <th v-for="item in configTable.props">
            {{item.name}}
          </th>
          <th>操作</th>
          </thead>
          <tbody>
          <tr v-for="item in tableData.datas">
            <td v-for="conProp in configTable.props">
              <p v-if="conProp.type == 'datetime' || conProp.type=='date'">{{item[conProp.prop] | datefmt("YYYY-MM-DD HH:mm:ss")}}</p>
              <p v-else>{{item[conProp.prop]}}</p>
            </td>

            <td class="opt_td">
              <el-button @click="itemCopy(item)" type="text" size="small">复制</el-button>
              <el-button @click="itemEdit(item)" type="text" size="small">编辑</el-button>
              <el-button @click="itemDel(item)" type="text" size="small">删除</el-button>
            </td>
          </tr>
          </tbody>

        </table>
      </div>

      <div class="footer">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="parseInt(tableData.total)"
          :page-size=pageSize
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </div>
</template>

<script>
  import common from "../data/common"
  import data from "../../static/js/data"
  import {Toast} from "mint-ui"
  import AddItem from "./sub/AddItem"
  import EditItem from "./sub/EditItem"
  import SelectProp from "./sub/SelectProp"

  export default {
        name: "right",
      data(){return{
        configTable:data.submitConfig[0],
        tableData: "",
        searchKey: '',
        searchValue:"",
        currPage:0,
        pageSize:12,

        editDialogTitle:"编辑",
        isCopyMode:false,
        dialogNewVisible: false,
        dialogEditVisible: false,
        dialogSelectVisible: false,
        dialogDeleteVisible:false,
        currEditItem:'',
        currSelectConProp:"",
      }},
      components:{
        AddItem,
        EditItem,
        SelectProp
      },
      methods:{
          getData(){
            var url = common.apidomain + "/admin/select"
              + "?tableName=" + this.configTable.tableName
              +"&currPage=" + this.currPage
              +"&searchKey=" + this.searchKey
              +"&searchValue=" + this.searchValue;
            this.$http.get(url).then(ret=>{
              this.tableData = ret.body.data;
            },ret=>{
              this.$message(ret.body.msg);
            })
          },
        queryData() {
            this.currPage = 0;
            this.getData()
        },
        pageChange(currPage){
            this.currPage = currPage - 1;
            this.getData();
          },
        dialogClose(){
          console.log("right.vue dialogClose")
            this.dialogEditVisible = false;
            this.dialogNewVisible = false;
            this.dialogSelectVisible = false;
            this.clearDialogView();
             this.getData();
        },
        clearDialogView() {
          console.log("dialog clearView")
          var elements = document.getElementsByClassName("inputItem");
          for (var i = 0; i < elements.length; i++) {
            elements[i].value = null;
          }
        },
        /**
         * 打开选择属性对话框
         * @param conProp
         */
        selectProp(conProp) {
            console.log("Right rev selectProp")
            this.dialogSelectVisible = true;
            this.currSelectConProp = null;
            this.currSelectConProp = conProp;
        },
        /**
         * 选择属性对话框,返回调用函数
         * @param prop
         * @param value
         */
        onSelectedProp(prop, value) {
            console.log(prop + "," + value)
          this.dialogSelectVisible = false;
          // this.currEditItem[prop] = value;
          // var newitem = {};
          // for (var attr in this.currEditItem) {
          //   newitem[attr] = this.currEditItem[attr];
          // }
          // this.currEditItem = newitem;
        },
        itemCopy(item) {
          this.editDialogTitle = "拷贝并新建";
          this.currEditItem = item;
          this.isCopyMode = true;
          this.dialogEditVisible = true;
        },
        itemEdit(item) {
          this.editDialogTitle = "编辑";
          this.currEditItem = item;
          this.isCopyMode = false;
          this.dialogEditVisible = true;
        },
        itemDel(item) {
          this.currDelItem = item;
          this.dialogDeleteVisible = true;
        },
        confirmDelete() {
          this.dialogDeleteVisible = false;
          var url = common.apidomain + "/admin/delete?" +
            "tableName=" + this.configTable.tableName +
            "&id=" + this.currDelItem.id;
          this.$http.get(url).then(ret=>{
            this.getData();
            Toast("删除成功")
          },ret=>{
            alert(ret.body.msg);
          })
        },
        itemAdd() {
          this.dialogNewVisible = true;
          var temp = this.configTable;
          this.configTable = null;
          this.configTable = temp;
        },
      },
      created(){
        var index = this.$route.params.index;
        this.configTable = data.submitConfig[index];
        console.log("Right.vue created:" + index);
        this.queryData();
      },
    beforeRouteUpdate(to,from,next) {
      var index = to.params.index;
      this.configTable = data.submitConfig[index];
      console.log("Right.vue beforeRouteUpdate:" + index);
      this.queryData();
      next();
    },
    watch: {
      $route: function (newval, oldval) {
        var index = newval.params.index;
        this.configTable = data.submitConfig[index];
        console.log("Right.vue watch:" + index);
        this.queryData();
      }
    }
    }
</script>

<style scoped>
  .query-bar :nth-child(n){
    float: left;
    display: flex;
    justify-content: space-around;
  }
  .query-bar :nth-child(2){
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .body {
    margin-bottom: 0px;
  }
  table.gridtable {
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }
  table.gridtable th {
    min-width: 70px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
  }
  .opt_td {
    width: 110px;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
  }
</style>
